html {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  height: 100%;
}

*:focus {
  outline: none;
}

a {
  text-decoration: none;
}

$max: 16;
$offset: 4;
$unit: 'px'; 
@mixin list-loop($className, $styleName) {
  $i: 0;

  #{$className + 'auto'} {
    #{$styleName}: auto !important;
  }

  @while $i <= $max {
    #{$className + $i} {
      @if ($i == 0) {
        #{$styleName}: #{$i + $unit} !important;
      } @else {
        #{$styleName}: #{$i + $unit};
      }
    }
    $i: $i + $offset;
  }
}
@include list-loop('.pl', 'padding-left');

@include list-loop('.mt', 'margin-top');
@include list-loop('.mr', 'margin-right');
@include list-loop('.mb', 'margin-bottom');
@include list-loop('.ml', 'margin-left');
@include list-loop('.mx', 'margin');
// Paddings
@include list-loop('.pt', 'padding-top');
@include list-loop('.pr', 'padding-right');
@include list-loop('.pb', 'padding-bottom');
@include list-loop('.pl', 'padding-left');
@include list-loop('.px', 'padding');

.flex-right {
  justify-content: flex-end !important;
}

.flex-left {
  justify-content: flex-start !important;
}

.flex-center {
  justify-content: center !important;
}

.flex-top {
  align-items: flex-start !important;
}

.flex-bottom {
  align-items: flex-end !important;
}

.flex-middle {
  align-items: center !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-small {
  font-size: 0.618rem;
}

.text-large {
  font-size: 1.125rem;
}

.text-nowrap {
  white-space: nowrap;
}

.text-ellipsis {
  overflow: hidden;
  min-width: 1px;
  flex-basis: 0;
  text-overflow: ellipsis;
}

.text-condensed {
  font-family: $font-condensed;
}

.text-monospace {
  font-family: $font-monospace !important;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;

  &.-column {
    flex-direction: column;
  }

  &.-wrap {
    flex-wrap: wrap;
  }

  &.-gap4 {
    gap: 0.25rem;
  }

  &.-gap8 {
    gap: 0.5rem;
  }

  &.-gap16 {
    gap: 1rem;
  }

  > .-fill {
    flex-basis: 100%;
    max-width: 100%;
  }

  > .-center {
    align-self: center;
  }

  > .-end {
    align-self: end;
  }

  > .-start {
    align-self: start;
  }

  > .-nowrap {
    white-space: nowrap;
  }

  > .-unshrinkable {
    flex-shrink: 0;
  }
}

@media screen and (max-width: 767px) {
  .min-768 {
    display: none !important;
  }
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.hide-scrollbar {
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.hide-scrollbar::-webkit-scrollbar-track {
  background-color: var(--theme-background-100);
}

.hide-scrollbar::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.hide-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: rgba(black, 0.25);
}

.text-muted {
  opacity: 0.5;
}

.text-danger {
  color: $red;
}

.text-success {
  color: var(--theme-buy-100);
}

.text-color-base {
  color: var(--theme-color-base);
}

.text-color-50 {
  color: var(--theme-color-50);
}

.text-color-100 {
  color: var(--theme-color-100);
}

.text-color-200 {
  color: var(--theme-color-200);
}

.text-color-o75 {
  color: var(--theme-color-o75);
}

.text-info {
  color: $blue;

  @at-root a#{&}:hover {
    color: lighten($blue, 5%);
  }
}

.text-bold {
  font-weight: 600;
}

#app.-light .text-muted {
  opacity: 0.75;
}
